<template>

  <div class='container'>
    <div class="app-container">
      <span class="guan">关键字</span>

      <el-input v-model="randomsPage.keyword" placeholder="根据编号搜索"></el-input>

      <el-button type="primary" @click="handleSearch">搜索</el-button>

      <el-button class="qing" type="white" @click='handleEle'>清除</el-button>

      <!-- 消息提示 -->
      <el-alert type="info" show-icon :title="randText">
      </el-alert>

      <!-- 列表 -->
      <el-table :data="List" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="180">
          <template v-slot="{row}">
            <span>{{row.questionType==='1'?'单选':row.questionType==='2'?'多选':'简答'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="项目编号">
          <template v-slot="{row}">
            <a href="#" style="color: rgb(0, 153, 255);" v-for="(item,i) in row.questionIDs" :key="i" @click="handlePreview(item)">{{item.number}}<br /></a>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(S)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人">
        </el-table-column>
        <!-- 按钮 -->
        <el-table-column align="center" label="操作">
          <template v-slot="{row}">
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDel(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="randomsPage.page" :page-sizes="[5, 10, 20, 50]" :page-size="10" layout=" prev, pager, next, sizes,jumper" :total="randomsTotal">
      </el-pagination>
      <!-- 弹出框 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <el-row :gutter="24">
          <el-col :span="6">【题型】:{{newObj.questionType==='1'?'单选':newObj.difficulty==='2'?'简答':'多选'}}</el-col>
          <el-col :span="6">【编号】:{{newObj.id}}</el-col>
          <el-col :span="6">【难度】:{{newObj.difficulty==='1'?'简单':newObj.difficulty==='2'?'一般':'复杂'}}</el-col>
          <el-col :span="6">【标签】:{{newObj.tags}}</el-col>
        </el-row>
        <br />
        <el-row :gutter="24">
          <el-col :span="6">【学科】:{{newObj.subjectID}}</el-col>
          <el-col :span="6">【目录】:{{newObj.catalogID}}</el-col>
          <el-col :span="6">【方向】:{{newObj.direction}}</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>【题干】: <br />
          <span v-html="newObj.question"></span><br />
          {{newObj.questionType==='1'?'单选题 选项：（以下选中的选项为正确答案）':newObj.difficulty==='2'?'简答题':'多选题 选项：（以下选中的选项为正确答案)'}}<br /><br /><br />
          <el-radio v-for="(item,i) in newObj.options" :key="i" v-model="item.isRight" :label="1"> {{item.code}}. {{item.title}}</el-radio>
        </el-row>
        <el-divider></el-divider>
        <el-row>【参考答案】:<el-button type="danger">视频答案预览</el-button>{{newObj.videoURL}}</el-row>
        <div></div>
        <el-divider></el-divider>
        <el-row>【答案解析】:{{newObj.answerID}}</el-row>
        <el-divider></el-divider>
        <el-row>【题目备注】:{{newObj.remarks}}</el-row>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {

  data () {
    return {
      newObj: {},
      // 弹窗显示
      dialogVisible: false,
      // 列表总数
      randomsTotal: 0,
      // 提示消息
      randText: '',
      // 渲染列表数据
      List: [],
      // 查询参数
      randomsPage: {
        page: 1,
        pagesize: 10,
        keyword: ''
      }
    }
  },
  methods: {
    // 弹窗信息渲染
    async handlePreview (Obj) {
      // 调用接口 获取数据
      const ret = await detail(Obj)
      console.log(ret)
      this.newObj = ret.data
      console.log(this.newObj)
      this.dialogVisible = true
    },
    // 关闭弹窗
    handleClose () {
      this.dialogVisible = false
    },
    // 删除
    async handleDel (Obj) {
      // 调用接口
      try {
        await this.$confirm('确认要删除吗？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const ret = await removeRandoms(Obj)
        if (ret.status === 200) {
          // 删除成功 重新渲染数据
          this.$message.success('删除成功')
          this.getList()
          const num = Math.ceil((this.randomsTotal - 1) / this.randomsPage.pagesize)
          this.randomsPage.page = this.randomsPage.page > num ? num : this.randomsPage.page
        }
      } catch {
        this.$message.error('删除失败')
      }
    },
    // 清除表单数据
    handleEle () {
      this.randomsPage.keyword = ''
      this.getList()
    },
    // 搜索 查
    async handleSearch (id) {
      if (!id) {
        this.getList()
      } else {
        // 调用接口
        const ret = await randoms(this.randomsPage)
        if (ret.status === 200) {
          // 获取查询的数据
          // 获取数据成功 获得列表数据
          this.List = ret.data.items
          // 提示消息
          this.randText = `数据一共${ret.data.counts}条`
          this.randomsTotal = ret.data.counts
        }
      }
    },
    // 调整每页的个数
    handleSizeChange (val) {
      this.randomsPage.pagesize = val
      this.getList(this.randomsPage)
    },
    // 跳转页码
    handleCurrentChange (val) {
      this.randomsPage.page = val
      this.getList()
    },
    // 获取列表数据
    async getList () {
      try {
        // 调用接口
        const ret = await randoms(this.randomsPage)
        // 获取数据成功 获得列表数据
        this.List = ret.data.items
        // 提示消息
        this.randText = `数据一共${ret.data.counts}条`
        this.randomsTotal = ret.data.counts
      } catch {
        this.$message.error('获取组题列表失败')
      }
    }
  },
  created () {
    this.getList()
  }

}
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
  float: left;
  background-color: #fff;
  height: 100%;
  width: 100%;
  span {
    padding: 0 12px 50px 0;
  }
  .el-input {
    width: 200px;
  }
  .el-button {
    float: right;
  }
  .qing {
    margin-right: 15px;
  }
  .el-alert {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .el-pagination {
    float: right;
  }
}
</style>
